<template>
  <div id="container">
    <div class="view" id="views"></div>
  </div>
</template>

<script>
import { loadModules } from "esri-loader";
import nodesData from "../assets/mockData/data";
export default {
  name: "HelloWorld",
  data() {
    return {
      m1: require("@/assets/images/svg/camera_m_1.svg"),
      vueArcGis: {
        ClassBreaksRenderer: null,
        SpatialReference: null,
        PopupTemplate: null,
        fcl: null
      },
      newArcGis: {
        map: null
      }
    };
  },
  methods: {
    async initLayer(data) {
      // 设置点聚合大小
      const renderer = this.createClusterRenderer();

      // 配置属性
      const options = {
        clusterRenderer: renderer,
        spatialReference: new this.vueArcGis.SpatialReference({
          wkid: 4326
        }),
        displayFlares: false, // 是否显示聚合子类，即环绕周围的小圆圈
        clusterRatio: 200, // 设置每个集群边界的大小
        data: data
      };

      const clusterLayer = new this.vueArcGis.fcl.FlareClusterLayer(options);
      this.newArcGis.map.add(clusterLayer);
    },
    createClusterRenderer() {
      let defaultSym = this.createPointSymbol(
        [255, 255, 0],
        "circle",
        10,
        [255, 255, 0],
        1
      );
      let renderer = new this.vueArcGis.ClassBreaksRenderer({
        defaultSymbol: defaultSym
      });
      renderer.field = "clusterCount";
      const smSymbol = this.createPictureSymbol(this.m1, "20", "20");
      const mdSymbol = this.createPictureSymbol(this.m1, "35", "35");
      const lgSymbol = this.createPictureSymbol(this.m1, "50", "50");
      const xlSymbol = this.createPictureSymbol(this.m1, "70", "70");

      renderer.addClassBreakInfo(0, 10, smSymbol);
      renderer.addClassBreakInfo(11, 20, mdSymbol);
      renderer.addClassBreakInfo(21, 40, lgSymbol);
      renderer.addClassBreakInfo(41, Infinity, xlSymbol);

      return renderer;
    },
    createPictureSymbol(url, width, height) {
      return {
        type: "picture-marker",
        url,
        width,
        height
      };
    },
    createPointSymbol(color, style, size, outlineColor, outlineWidth) {
      return {
        type: "simple-marker",
        style: style,
        color: color,
        size: size,
        outline: {
          color: outlineColor,
          width: outlineWidth
        }
      };
    },
    createSimpleFillSymbol(color, style = "solid", outlineColor, outlineWidth) {
      return {
        type: "simple-fill",
        style,
        color,
        outline: {
          color: outlineColor,
          width: outlineWidth
        }
      };
    }
  },
  mounted() {
    loadModules([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/renderers/ClassBreaksRenderer",
      "esri/geometry/SpatialReference",
      `http://${location.host}/fcl/FlareClusterLayer_v4.js`, //这里改为你项目的地址 （该项目默认启动为http://localhost:8080/）
      "esri/PopupTemplate"
    ])
      .then(
        ([
          Map,
          MapView,
          FeatureLayer,
          ClassBreaksRenderer,
          SpatialReference,
          fcl,
          PopupTemplate
        ]) => {
          this.vueArcGis = {
            ClassBreaksRenderer,
            SpatialReference,
            PopupTemplate,
            fcl
          };
          var baseLayer = new FeatureLayer(
            "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer"
          );
          var map = new Map({
            basemap: "osm",
            layers: [baseLayer]
          });
          const mapView = new MapView({
            map: map,
            container: "views",
            center: [121.419276689, 31.0565858993], // 中心点
            scale: 164521
          });
          mapView.ui._removeComponents(["attribution"]); //去掉logo
          mapView.ui.move(["zoom"], "bottom-right"); // 缩放控件移动到右下方

          mapView.when(() => {
            const allPoints = [];
            for (const key in nodesData) {
              const { x, y = null } = nodesData[key];
              if (x && y) {
                allPoints.push({
                  x,
                  y,
                  key
                });
              }
            }
            this.initLayer(allPoints);
          });
          mapView.on("click", event => {
            var screenPoint = {
              //当前点击的经纬度
              x: event.x,
              y: event.y
            };
            mapView.hitTest(screenPoint).then(response => {
              console.log(response);
              if (response.results.length > 0 && response.results[0].graphic) {
                let [{ graphic: { attributes } } = res] = response.results;
                console.log("这是当前点击的点位信息", attributes);
                //处理高亮显示
              }
            });
          });

          this.newArcGis = { map };
        }
      )
      .catch(() => {
        // handle any errors
        //console.error(err);
      });
  }
};
</script>

<style>
#container,
.view {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}
</style>
